import { StrictMode } from "react";
import { createRoot } from "react-dom/client";
import "./index.css";
import App from "./App.jsx";
import { BrowserRouter, HashRouter, Route, Routes } from "react-router-dom";
import Home from "./views/home.js";
import About from "./views/About.js";
import NotFound from "./views/NotFound.js";
import List from "./views/List.js";
import ListDetail from "./views/ListDetail.js";
import Main from "./views/Main.js";

createRoot(document.getElementById("root")).render(
  <StrictMode>
    <BrowserRouter>
      <Routes>
        <Route path="" element={<Main></Main>}>
          <Route path="/" element={<App></App>}></Route>
          <Route index element={<Home></Home>}></Route>
          <Route path="/about" element={<About></About>}></Route>
          <Route path="/list" element={<List />}>
            {/*新增子路由，list/id*/}
            <Route path=":id" element={<ListDetail />}></Route>
          </Route>
          <Route path="/*" element={<NotFound></NotFound>}></Route>
        </Route>
      </Routes>
    </BrowserRouter>
  </StrictMode>
);
